<template>
  <div class="Header">
    <el-container>
      <!--页面导航-->
      <el-header class="header">
        <div class="line"></div>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item>
<!--            <img data-v-73637230=""-->
<!--                 src=""-->
<!--                 alt="element-logo" class="nav-logo">-->
            <img src="favicon.ico" style="height: 38px">
            <span style="margin-left: 2px;font-weight: bold;color: #F56C6C;font-size: 18px">哇啦智能招聘</span>
          </el-menu-item>
<!--          <el-menu-item v-show="city_show">-->
          <el-menu-item >
            <a href="#">
              <i class="el-icon-location-information"></i>{{LocationCity}}
              <span style="font-size: 12px;color: antiquewhite;">[切换城市]</span>
            </a>
          </el-menu-item>
          <el-menu-item index="/" @click="jump('/')">首页</el-menu-item>
          <el-menu-item index="/recommend" @click="jump('recommend')">推荐</el-menu-item>
          <el-menu-item index="/job" @click="jump('job')">职位</el-menu-item>
          <el-menu-item index="/company" @click="jump('company')">公司</el-menu-item>
          <el-menu-item index="/school" @click="jump('school')">校招</el-menu-item>
          <el-menu-item index="/internship" @click="jump('internship')">实习</el-menu-item>
          <el-menu-item>
            <el-input type="text" placeholder="请输入内容" prefix-icon="el-icon-search" size="medium" style="width: 500px;"
                      v-model="keyWord">
              <el-button slot="suffix" style="margin-right: 10px;padding-top: 10px" type="text" @click="toSearchResult">
                搜索
              </el-button>
            </el-input>
          </el-menu-item>

          <el-menu-item index="/message" @click="jump('message')" v-show="user!=''"
                        style="position: absolute;right: 168px">
            <span>消息</span>
            <el-badge :value="12" class="item"></el-badge>
          </el-menu-item>

          <el-submenu index="user" v-show="user!=''" style="position: absolute;right: 25px">
            <template slot="title"><img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="" style="width: 35px;height: 35px"> {{user.username}}</template>
            <el-menu-item index="user-person" @click="jump('person')"><i class="el-icon-user"></i> 个人中心</el-menu-item>
            <el-menu-item index="user-resume" @click="jump('resume')"><i class="el-icon-document"></i> 我的简历</el-menu-item>
            <el-menu-item index="user-help" @click="jump('help')"><i class="el-icon-question"></i> 帮助</el-menu-item>
            <el-menu-item @click="logout"><i class="el-icon-switch-button"></i> 退出登录</el-menu-item>
          </el-submenu>

          <el-menu-item v-show="user==''" style="position: absolute;right: 120px" @click="toLogin">登录</el-menu-item>
          <el-menu-item v-show="user==''" style="position: absolute;right: 50px" @click="toRegister">注册</el-menu-item>
        </el-menu>
      </el-header>
    </el-container>
    <el-divider></el-divider>
    <el-divider></el-divider>
  </div>
</template>

<script>
  import BMap from 'BMap'

  export default {
    name: 'Header',
    created () {
      var route_index = this.$route.path
      this.activeIndex = route_index
      this.activeIndex2 = route_index
      if (route_index !== '/') {
        this.city_show = 0
      }

      if (this.$session.get("user")==null) {
        this.user = ''
      } else {
        this.user = this.$session.get("user")
      }
      this.user.avatar = require('@/assets/user.png')
    },
    data () {
      return {
        activeIndex: '/',
        activeIndex2: '/',
        city_show: 1,
        LocationCity: '',
        keyWord: this.$route.query.keyWord,
        user: '',
      }
    },
    methods: {
      // 定义获取城市方法
      city () {
        try {
          const geolocation = new BMap.Geolocation()
          var _this = this
          geolocation.getCurrentPosition(function getinfo (position) {
            let city = position.address.city // 获取城市信息
            _this.LocationCity = city
          }, function (e) {
            _this.LocationCity = ''
          }, {provider: 'baidu'})
        } catch (e) {
          _this.LocationCity = ''
        }
      },
      // 跳转页面
      jump (target) {
        // this.$router.push({path: target})
        console.log(target)
        this.$router.push(target)
      },
      toLogin () {
        this.$router.push({path: 'login'})
      },
      toRegister () {
        this.$router.push({path: 'register'})
      },
      toSearchResult () {
        this.$router.push({path: 'search_result', query: {keyWord: this.keyWord}})
      },
      logout () {
        this.$session.set('user',null)
        this.user = ''
        this.$message('账号已退出!')
        setTimeout(() => {
          this.$router.go(0)
        }, 1000)
      }
    },
    mounted () {
      this.city() // 触发获取城市方法
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header {
    text-align: center;
    padding: 0px 0px;
    background: gray;
    position: fixed;
    z-index: 100;
    width: 1550px;
  }

  .item {
    position: absolute;
    right: 5px;
    bottom: 15px;
  }
</style>
